<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
  <style>
    .top{
      height: 120px;
      background-color: #5AA4AE;
      color: #fff;
      font-size: 30px;
      position: fixed;
      top: 0;
      width: 100vw; /*viewport视口 100%视口宽度 全屏宽*/
    }
    .left,.right{
      width: 60px;
      height: 200px;
      position: fixed;
      top: 300px;
    }
    .left{
      background-color: #fff799;
      left: 20px;
    }
    .right{
      background-color: #f35336;
      right: 20px;
    }
    .main{
      margin-top: 130px;
    }
  </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, at atque cumque cupiditate dolorum esse,
    fugiat ipsum nemo nihil non pariatur quaerat quidem recusandae rem repellat sunt velit veniam vitae?
  </div>
  <div>Aliquid consectetur cumque deleniti ea eos nulla perferendis ullam vel. Ab amet aperiam commodi dolorum eveniet
    excepturi exercitationem expedita iusto maiores modi, mollitia perspiciatis placeat quibusdam, sint sit voluptates
    voluptatum.
  </div>
  <div>Architecto aspernatur atque beatae consectetur consequuntur deleniti dicta dolorum error est excepturi fugit
    harum illum inventore ipsa laudantium, neque odio omnis optio possimus praesentium rem sapiente tenetur velit veniam
    veritatis.
  </div>
  <div>Cum, ex, quo. Aperiam consequatur deleniti dolorum expedita in laboriosam minima mollitia odio quas repudiandae?
    Animi at commodi dignissimos esse fuga maiores nam nobis nostrum numquam placeat. Doloribus quisquam, tempore?
  </div>
  <div>At quas, vero! Aliquid blanditiis consequuntur dignissimos dolores et facilis fugiat laudantium omnis. A cum
    deserunt dignissimos eaque eius facere provident quaerat quo? Cum facere libero, mollitia officiis tempora
    voluptates?
  </div>
  <div>A aliquam, consequuntur, dolor doloremque excepturi facilis ipsam magni minus necessitatibus nesciunt nobis nulla
    obcaecati officiis perferendis quisquam reprehenderit, saepe sint temporibus ullam vero. Alias amet itaque
    laudantium quisquam veniam?
  </div>
  <div>Culpa delectus doloribus ducimus ea enim nulla tempore voluptas? Animi debitis exercitationem fugit magni modi
    nam neque nostrum possimus quas quasi quis, sapiente sit suscipit tempore temporibus. Neque, nisi quam.
  </div>
  <div>Ad delectus dolor expedita laboriosam repellat similique tempore ullam voluptates? Amet animi architecto
    assumenda consequatur dolores illum laudantium magnam nesciunt. Cupiditate ex ipsam ipsum laboriosam mollitia nam
    neque nostrum quisquam?
  </div>
  <div>Ad earum libero quidem rem sapiente? Laboriosam minima nisi provident! Beatae culpa cumque debitis esse eum
    exercitationem, impedit inventore laboriosam maiores minus, molestias nesciunt non sapiente tempore unde velit
    voluptatibus.
  </div>
  <div>Adipisci amet dolorem, minima nisi nostrum quae quaerat, recusandae rerum sit unde ut voluptas voluptatem! Ad
    dolore esse fuga in modi nam nobis quis! Doloribus et facere inventore pariatur quod?
  </div>
  <div>Ab commodi culpa debitis eaque eos eum, impedit itaque magni maiores natus necessitatibus perspiciatis provident
    quas quibusdam quis quo repudiandae sequi temporibus unde voluptatem? Alias amet minima odit qui recusandae!
  </div>
  <div>Ab, accusamus architecto aut blanditiis cupiditate dicta est fugit hic iste laborum magnam magni modi nihil
    nostrum pariatur perspiciatis praesentium quasi quia quis, quisquam quod repellat repudiandae sit unde voluptates!
  </div>
  <div>Ab, alias at, deserunt distinctio doloribus earum eligendi error esse eveniet facere impedit magnam maiores nam
    neque nisi non nulla officia placeat quibusdam, quidem quod ratione recusandae reiciendis totam veritatis?
  </div>
  <div>Amet deleniti doloremque ducimus fuga magni mollitia nihil pariatur quisquam quo repellendus? A, aperiam et!
    Aperiam, eveniet, similique? Ab, autem cum doloribus enim libero molestias nobis perspiciatis placeat quisquam
    repellendus?
  </div>
  <div>Ab accusantium ad autem, beatae dolorem ducimus et fuga magnam, magni nobis perferendis quasi qui repudiandae?
    Accusantium assumenda, doloribus est facere ipsam labore mollitia non pariatur quo reprehenderit, rerum voluptas!
  </div>
  <div>Assumenda atque cumque debitis deleniti deserunt dolorum ducimus excepturi expedita id ipsa minima, molestias
    natus nesciunt nulla officia officiis placeat possimus, qui similique sit tempora, tenetur vero voluptatum! Quam,
    voluptatem.
  </div>
  <div>A accusamus accusantium aut, autem facere laboriosam laborum pariatur reiciendis, rem tempore temporibus ut? Amet
    architecto, assumenda atque consequuntur dolore fuga fugit nemo nobis non odit, sunt vel veritatis, voluptate.
  </div>
  <div>Asperiores at debitis iste nulla perferendis placeat praesentium quam recusandae, sunt voluptas. Explicabo facere
    iusto necessitatibus non nostrum quidem sed sequi? Architecto, cumque deserunt harum nisi nobis quam temporibus
    tenetur.
  </div>
  <div>Aspernatur assumenda aut beatae delectus eligendi eveniet ex excepturi illum ipsa iste modi officiis optio,
    ratione tenetur voluptatibus. Aliquid blanditiis corporis delectus eos, impedit mollitia odit officiis recusandae
    reprehenderit temporibus.
  </div>
  <div>Aperiam corporis earum impedit itaque numquam reprehenderit vero. Ad adipisci dicta facilis fugiat iusto maxime
    minus nemo neque nesciunt, perferendis porro quaerat qui quia reiciendis repellendus rerum veritatis! Alias, libero.
  </div>
  <div>Ad amet asperiores assumenda deleniti earum, harum iste laboriosam laudantium numquam perspiciatis quis quod
    ratione vel velit veniam. At blanditiis deserunt dignissimos eum, harum laborum obcaecati optio pariatur quis quod!
  </div>
  <div>Ad, consectetur corporis ex pariatur quo quod ratione vero. A animi at dolorum ea enim eveniet fuga harum
    incidunt nam nihil odio, officiis placeat repellat repellendus sed suscipit temporibus voluptas.
  </div>
  <div>Consequatur doloremque ducimus enim incidunt libero modi molestias mollitia nesciunt nihil, nulla, perspiciatis,
    quaerat quod soluta vel voluptatum. Asperiores consectetur corporis, deleniti eius illum perspiciatis possimus quas
    recusandae repellendus voluptatibus!
  </div>
  <div>Accusantium, alias autem consequatur corporis cumque, deleniti doloremque enim facilis illo illum incidunt ipsum,
    libero magni minima nam nihil obcaecati omnis pariatur possimus quae quibusdam ratione repellat similique voluptas
    voluptate!
  </div>
  <div>Ab aliquid culpa ducimus esse id minima nemo nostrum omnis optio? Ab adipisci est fugit minus quisquam sint unde!
    Architecto consectetur cum fugit ipsam nihil placeat porro ut voluptas voluptate!
  </div>
  <div>Ab aliquid architecto asperiores aut cumque cupiditate distinctio, enim id ipsum iusto maiores modi mollitia nam
    perferendis praesentium sed ullam vel, veniam voluptas voluptatibus? Cumque dolores ipsum labore soluta unde!
  </div>
  <div>Amet corporis dicta distinctio dolor dolorum error iusto magni minima necessitatibus officiis perferendis quae
    quod, suscipit! Ad atque aut excepturi explicabo ipsa ipsum labore minima, minus nam necessitatibus obcaecati odit.
  </div>
  <div>Distinctio esse in libero magni molestias optio quos sequi similique tenetur ullam? Asperiores autem, cum
    delectus distinctio, dolor excepturi expedita inventore itaque laborum nostrum obcaecati perferendis ratione saepe
    sint velit.
  </div>
  <div>Aliquam architecto atque cum dolorum earum, eum id inventore nemo qui reprehenderit sapiente soluta, tenetur,
    voluptatum? Adipisci culpa dolorum esse explicabo ipsum iusto nam nostrum perspiciatis ratione sint, veniam vero!
  </div>
  <div>A, aliquid at dolor facere fugit id laudantium nam nulla praesentium quae quas quod, reiciendis repellat saepe,
    sunt totam vel voluptates voluptatibus! Et excepturi iste iusto nesciunt, obcaecati repellat rerum?
  </div>
  <div>Autem expedita, id ipsa magni minima modi numquam quam, quod repudiandae sint soluta, tenetur voluptates. Alias
    labore natus officia optio quas quis quod vel. Debitis esse obcaecati tempore temporibus voluptatibus?
  </div>
  <div>Exercitationem hic necessitatibus numquam suscipit! Aliquid architecto atque, debitis eligendi fugiat id illo
    ipsum iusto laudantium magnam, nemo non ut vel? A delectus, dolor. Corporis cupiditate harum nemo quaerat sed.
  </div>
  <div>Alias atque beatae dolore eaque eligendi enim expedita fuga laborum neque, nisi nostrum, officia officiis
    perspiciatis suscipit vel? Dignissimos distinctio doloremque ipsa ipsam laborum mollitia officia praesentium quo
    ratione sint!
  </div>
  <div>Ab aliquid aperiam aspernatur deserunt dicta esse fuga inventore iste iure laboriosam laborum, libero maiores
    maxime nobis obcaecati optio perferendis quo recusandae reiciendis repellendus? Architecto dolore perferendis quam
    quas. Voluptate!
  </div>
  <div>Assumenda cum ducimus nam quas repudiandae tenetur velit! Consectetur cumque delectus earum explicabo ipsam
    magnam mollitia quaerat reprehenderit ullam unde? Dolorem doloribus ducimus eaque eos laudantium nemo numquam odit
    recusandae!
  </div>
  <div>Accusamus asperiores blanditiis cum cupiditate deleniti deserunt dicta doloremque eos eveniet excepturi illo
    inventore iusto libero minima molestias, nemo placeat porro quis quos ratione rem repellat sit ullam unde
    voluptatibus!
  </div>
  <div>Earum fuga magnam nesciunt obcaecati! Ab accusantium amet aperiam enim eos eveniet illum iure labore maxime
    molestiae nemo, officiis quae quam quas quasi qui quidem ratione rem tempore tenetur voluptatum!
  </div>
  <div>Alias dolorem doloremque eum ipsum itaque labore nihil, quaerat. Adipisci aliquam aspernatur consequatur delectus
    deleniti eius iusto modi nemo odio voluptates. Consequatur et iure obcaecati officia, quibusdam reiciendis soluta
    voluptas.
  </div>
  <div>Accusamus aliquid animi aut consequatur cum cupiditate deserunt enim eos ex harum hic illum iure laudantium
    libero magnam maiores molestiae mollitia placeat possimus provident quidem recusandae, sed suscipit veniam
    voluptates.
  </div>
  <div>Corporis iure magni temporibus? Accusantium cumque distinctio dolor dolorum eaque eveniet illo iusto magni,
    maiores, nobis nostrum numquam odio officiis pariatur quidem quisquam, rerum suscipit unde ut vel veritatis vitae?
  </div>
  <div>Nostrum, vel, voluptas. Amet blanditiis culpa cumque dicta dolore doloremque id illo ipsam ipsum iusto labore
    laboriosam laudantium nobis obcaecati omnis porro quos rerum, sapiente sed similique sint tempore velit?
  </div>
  <div>Ab architecto asperiores assumenda blanditiis cum cupiditate dicta doloremque excepturi expedita explicabo magnam
    magni molestias neque nihil nisi nostrum quo quod rem repellat repellendus rerum sapiente sit sunt ut, vitae.
  </div>
  <div>A dolorum earum et ex inventore laboriosam laudantium molestiae nesciunt reiciendis voluptate! Amet, aut
    delectus, deleniti ea exercitationem laudantium libero minima, molestiae numquam odio qui quidem reiciendis unde
    velit vero.
  </div>
  <div>A accusamus blanditiis debitis eaque eius exercitationem, fugiat hic illo ipsa nesciunt nihil omnis optio
    possimus quas quibusdam quisquam quo repellendus sequi sit voluptates. Aut debitis laudantium quam quia tempore!
  </div>
  <div>Accusantium consectetur corporis ipsum laboriosam maiores nulla placeat sint tempore, tenetur voluptatibus.
    Blanditiis ea eius eos exercitationem fugit, iusto laboriosam porro, quae quasi rem, reprehenderit saepe suscipit
    totam unde vitae?
  </div>
  <div>Ad alias blanditiis, cum deleniti dolore doloribus incidunt, ipsam molestiae molestias placeat recusandae
    repellat sit soluta sunt velit. Adipisci aperiam expedita necessitatibus nihil non quia ullam! Cum distinctio nisi
    suscipit.
  </div>
  <div>Architecto assumenda cum debitis, dolore doloremque earum est harum illo libero magnam molestiae nam pariatur
    quae quas quos sint tempora. Accusantium aliquid esse facere incidunt iste sapiente suscipit totam voluptatum.
  </div>
  <div>Dolorum, excepturi, repellendus. Amet, assumenda beatae consequuntur delectus dicta doloremque dolorum eos est ex
    molestiae officia quam sapiente soluta. Architecto debitis dignissimos dolore doloribus fugit omnis quisquam
    reprehenderit sint veniam!
  </div>
  <div>Asperiores at delectus est, harum illo laboriosam officia, qui reiciendis repellendus sequi sunt totam ullam
    velit veniam voluptates. Architecto blanditiis facilis modi. Dolorum eaque quia repellendus repudiandae sunt,
    veritatis voluptatibus!
  </div>
  <div>Autem neque optio praesentium similique voluptatum? Accusamus ad alias, aperiam aut consequatur corporis
    dignissimos eligendi eum explicabo illo ipsa ipsum magnam maiores non obcaecati reprehenderit soluta tempore totam
    ullam voluptatem?
  </div>
</div>
</body>
</html>